<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p>无序列表</p>
    <ul>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>
    <hr />
    <p>不同类型的无序列表</p>
    <ul type="disc">
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>
    <ul type="circle">
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>
    <ul type="square">
        <li>这是无序列表</li>
        <li>这是无序列表</li>
        <li>这是无序列表</li>
    </ul>
    <hr />
    <p>嵌套无序列表</p>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <hr />
    <p>多层嵌套无序列表</p>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <hr />
    <p>嵌套无序列表</p>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶</li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <hr />
    <p>有序列表</p>
    <ol>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>
    <hr />
    <p>不同类型的有序列表</p>
    <ol type="1">
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>
    <ol type="a">
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>
    <ol type="A">
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>
    <hr />
    <p>带起始编号的有序列表</p>
    <ol start="10">
        <li>这是有序列表</li>
        <li>这是有序列表</li>
        <li>这是有序列表</li>
    </ol>
    <hr />
    <p>自定义列表</p>
    <dl>
        <dt>西瓜</dt>
        <dd>西瓜是很甜的水果很便宜随便吃</dd>
        <dt>葡萄</dt>
        <dd>葡萄瓜是很酸甜的水果还能吃的起</dd>
        <dt>榴莲</dt>
        <dd>榴莲是很臭很香的水果,基本买不起</dd>
    </dl>
</body>

</html>